import React, {useContext, useEffect, useState} from "react";
import {Dimensions, ImageBackground, ScrollView, Text, TextInput, TouchableOpacity, View} from "react-native";
import LocaleContext from "../libs/locale";
import WalletContext from "../libs/wallet";
const {width, height,scale} = Dimensions.get("window");
import logo from '../assets/aboutlogo.png';
import under from '../assets/redEnvelopeLoad/under.png';
import openRedEnvelope from '../assets/redEnvelopeLoad/openRedEnvelope.png';
import openRedEnvelope_EN from '../assets/redEnvelopeLoad/openRedEnvelope_En.png';
import AsyncStorage from "@react-native-async-storage/async-storage";

//一般当作插件使用，显示在其他页面上面
const RedEnvelopeLoad = ({visible,back,sender,loadType,bless}:any)=>{
    const locale:any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const [lang, setLang] = useState("zh");

    useEffect(()=>{
        const work = async () => {
            const lang = await AsyncStorage.getItem('@lang');

            setLang(lang as any);
        }
        work();
    })

    return(
            visible?
                <View style={{marginTop:-height,height:height,width:width,backgroundColor:"#0000009E",alignItems:"center",justifyContent:"center"}}>
                    <View style={{width:0.85*width,height:0.6*height,backgroundColor:"#FB3D2A",borderRadius:20,overflow:"hidden",marginTop:0*height}}>
                        <TouchableOpacity style={{width:0.1*width,height:0.1*width,marginTop:5,alignSelf:"flex-end",marginRight:5}}
                        onPress={()=>{back("0")}}>
                            <Text style={{fontSize:width/360*30,color:"#F5FEB0",borderColor:"#E0432D"}}>×</Text>
                        </TouchableOpacity>
                        <ImageBackground source={logo} style={{width:0.17*width,height:0.17*width,alignSelf:"center",marginTop:10}}/>
                        {
                            loadType=="0"?
                                (
                                <View >
                                    <Text style={{alignSelf:"center",marginTop:15,fontSize:width/360*13,fontWeight:"bold",color:"#FFBCA2"}}> {sender} </Text>
                                    <Text style={{alignSelf:"center",marginTop:8,fontSize:width/360*13,fontWeight:"bold",color:"#FFBCA2"}}> {(locale as any)._("RedEnvelopeLoad.Type")} </Text>
                                    <Text style={{alignSelf:"center",marginTop:15,fontSize:width/360*20,fontWeight:"bold",color:"#FFBCA2",paddingLeft:width*0.05,paddingRight:width*0.05}}>{bless}</Text>
                                {/*    */}
                                </View>)
                            :
                                <Text style={{width:0.8*width,height:0.25*width,alignSelf:"center",marginTop:0.035*height,color:"#FFBCA2",fontSize:width/360*22,textAlign:"center"}}>
                                    {locale._("RedEnvelopeLoad.AlertLater")}
                                </Text>
                        }

                        <View style={{flex:1,justifyContent:"flex-end"}}>
                            <ImageBackground source={under} style={{width:width*0.85,height:height*0.23}}>
                                {
                                    loadType=="0"?
                                        <TouchableOpacity activeOpacity={0.9} onPress={()=>{back("1")}}>
                                            {
                                                lang=='zh'?
                                                    <ImageBackground source={openRedEnvelope} style={{width:0.25*width,height:0.25*width,alignSelf:"center",marginTop:-0.03*width}}/>
                                                    :
                                                    <ImageBackground source={openRedEnvelope_EN} style={{width:0.25*width,height:0.25*width,alignSelf:"center",marginTop:-0.03*width}}/>
                                            }

                                        </TouchableOpacity>
                                        :
                                        null
                                }

                                    <View style={{flex:1,justifyContent:"flex-end",alignItems:"center"}}>
                                        <TouchableOpacity onPress={()=>{back("2")}}>
                                            <Text style={{fontSize:width/360*17,backgroundColor:"#C62C1F",padding:4,marginBottom:0.04*height,color:"white",borderRadius:5}}>{(locale as any)._("RedEnvelopeLoad.View")} ></Text>
                                        </TouchableOpacity>
                                    </View>
                            </ImageBackground>
                        </View>
                    </View>
                </View>
                :null



    );
}
export  default RedEnvelopeLoad;
